<template>
  <div class="weekly-reward-order">
    <c-title :text="text"></c-title>
    <div class="box">
      <div class="box-item" v-for="item in list">
        <div class="box-item-top">
          <div class="column w-50" >
            <span style="text-align: left; width: 100%; margin-left: 0.75rem;">订单编号</span>
            <span  class="main-color mt-10 order">{{ item.order_sn }}</span>
          </div>
          <div class="column w-25">
            <span>订单金额</span>
            <span class="main-color mt-10  fz26 bold">{{$i18n.t('money')}}{{ item.price }}</span>
          </div>
          <div class="column w-25">
            <span>商品数量</span>
            <span class="main-color mt-10  fz26 bold">{{ item.nums }}</span>
          </div>
        </div>
        <div class="line"></div>
        <template v-if="item.goods && item.goods.length !== 0">
          <div class="content" v-for="c_item in item.goods" style="flex: 2;">
            <div class="info">
              <van-image class="flex-shrink" width="2rem" round height="2rem"
                :src="c_item.thumb" />
              <span class="nick-name  fz26 bold">{{c_item.title}}</span>
            </div>
            <div class="w-25 fz26 bold">{{$i18n.t('money')}}{{ c_item.price }}</div>
            <div class="w-25 fz26 bold">{{ c_item.total }}</div>
          </div>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
import { Image as VanImage } from 'vant';
import { scrollMixin } from '../../../utils/mixin';
export default {
  components: { VanImage },
  mixins: [scrollMixin],
  data() {
    return {
      text: "",
      list: [],
      isLoadMore: true,
      last_page: 1,
      current_page: 1,
    };
  },
  activated() {
    this.isLoadMore = true;
    let num = Number(this.$route.params.num);
    if (num == 1) {
      this.text = '部门订单';
      this.fun.setWXTitle('部门订单');
    } else {
      this.text = "区域订单";
      this.fun.setWXTitle('区域订单');
    }
    this.getData();
  },
  methods: {
    getMoreData(){
      this.isLoadMore = false;
      if(this.current_page>=this.last_page){
        return;
      }
      let page = this.current_page + 1;
      this.getData(page);
    },
    getData(page = 1) {
      let url = 'plugin.weekly-rewards.frontend.controllers.center.team-order';
      if (Number(this.$route.params.num) == 2) {
        url = 'plugin.weekly-rewards.frontend.controllers.center.area-order';
      }
      $http.get(url, { page }, '').then(res => {
        this.isLoadMore = true;
        if (res.result) {
          let data = res.data;
          this.current_page = data.current_page;
          this.last_page = data.last_page;
          if (page == 1) {
            this.list = data.data;
          } else {
            this.list = this.list.concat(data.data);
          }
        } else {
          this.$toast(res.msg);
        }
      })
    }
  }
};
</script>

<style scoped lang="scss">
.weekly-reward-order {
  .order {
    font-size: 0.8125rem;
    text-align: left;
    width: 100%;
    margin-left: 0.75rem;
    font-weight: 500;
  }

  .box {
    padding: 0.8125rem;
  }

  .box-item-top {
    display: flex;
    justify-content: space-around;
    color: #707070;
  }

  .flex-shrink {
    flex-shrink: 0;
  }

  .w-50 {
    width: 50%;
  }

  .info {
    width: 50%;
    display: flex;
    align-items: center;
    padding-left: 0.55rem;
  }

  .w-25 {
    width: 25%;
  }

  .info::-webkit-scrollbar {
    display: none;
  }

  .w-33 {
    width: 33%;
  }

  .nick-name {
    margin-left: 0.4688rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .content {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 0.625rem;
  }

  .fz26 {
    font-size: 0.8125rem;
  }

  .bold {
    font-weight: 500;
  }

  .line {
    width: 100%;
    height: 1px;
    background: #ececec;
    margin: 0.625rem 0;
  }

  .mt-10 {
    margin-top: 0.3125rem;
  }

  .main-color {
    color: #000;
  }

  .column {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .box-item {
    background: #fff;
    border-radius: 0.625rem;
    padding: 0.4688rem 0.25rem;
    margin-bottom: 0.625rem;
  }
}
</style>
